<template>
  <div id="app">
     <div class="common_navi" style="z-index: 2;">
      <div class="mainnavibar clearfix" data-tracker-init="{&quot;selector&quot;: &quot;.J-tracker-item&quot;}" data-tracker-params="{&quot;category&quot;: &quot;tab&quot;}">
        <div class="cover J_gotoMap"></div>
        <div class="J_prevent J_gotoMap J-tracker-item" @click="routeClick(1)"  v-bind:class="{ 'active': isMpaActive }" data-tracker-params="{&quot;label&quot;: &quot;index&quot;}">
          <router-link to="/">
            <span class="icon01_new icon_index">地图</span>
          </router-link>
        </div>
        <div class="J_prevent J_gotoNavi J-tracker-item" @click="routeClick(2)"  v-bind:class="{ 'active': isLineActive }" data-tracker-params="{&quot;label&quot;: &quot;navi&quot;}">
          <router-link to="/busline">
            <span class="icon01_new icon_route">路线</span>
          </router-link>
        </div>
        <div class="J_prevent J_gotoNearBy J-tracker-item" @click="routeClick(3)"  v-bind:class="{ 'active': isMyActive }" data-tracker-params="{&quot;label&quot;: &quot;nearby&quot;}">
          <router-link to="/my">
            <span class="icon01_new icon_nearby">我的</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="common_search" style="z-index: 12;"></div>
    <div class="common_top J_common_top"></div>
    <div class="common_top_content"></div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isMpaActive: true,
      isLineActive: false,
      isMyActive: false
    }
  },
  computed: {},
  methods: {
    routeClick(item) {
      if (item === 1) {
        this.isMpaActive = true
        this.isLineActive = false
        this.isMyActive = false
      } else if (item === 2) {
        this.isMpaActive = false
        this.isLineActive = true
        this.isMyActive = false
      } else {
        this.isMpaActive = false
        this.isLineActive = false
        this.isMyActive = true
      }
    }
  }
}
</script>

<style>
.active {
  color: #fff;
}
</style>
